◀︎STUDY JavaScript_005-1 HTML: <input type="color">

1

-----

-----

-----

-----

<input type="color"> の確認

このタグを記述すると「カラー・ピッカー入力ボックス」(カラー・ボックス) が表示される.
クリックすると「カラー・ピッカー・ダイアログ」が現れる.
Safari(ブラウザ)では, さらに「カラー・パネル」も表示できる.
<input type="color"value="#ff0000"> のように RGBカラー・コードで色の指定を行う.
value属性を省略した場合は #000000 (black デフォルト)が適応される.

▼ Download: ■ sample_JS_005-A

<datalist> タグで optionカラーを設定できる.

<input type="color"list="カラー" value="#456789">
<datalist id="カラー">
<option value="#000000"></option>
<option value="#ff00ff"></option>
<option value="#00ff00"></option>
<option value="#abcdef"></option>
<option value="#123456"></option>
<option value="#facebc"></option>
</datalist>

サンプル - 1

カラー・ボックスをクリックするとカラー・ピッカー・ダイアログが表示されます. 現在の RGBカラー・コードは #abcdef" です.

サンプル - 2

カラー・ボックスの大きさをどのようにして指定するのか ?

サンプル - 3

カラー・ボックスをクリックして色を決定すると文字色にも同時に反映される.

サンプル - 4

2種類のカラー・ボックスが用意されている. 文字色と背景色を別々に指定できる.

<input> タグの Attribute list="○○" と <datalist> タグの解説

<datalist> タグに対する入力候補リストを表示します.
<option> タグと Attribute の value="○○○" を記述します.
<option value="○○○_A"></option>
<option value="○○○_B"></option>

<input type="color"disabled> 解説

disabled を指定すると表示が少し薄い色になり, 何も動作しなくなる.
カラー・ボックス <input type="color"disabled>
テキスト入力 <input type="text"disabled>
チェックボックス <input type="checkbox"disabled>
ラジオボタン <input type="radio"disabled>
送信ボタン <input type="submit"disabled>

disabled

1

-----

-----

-----

-----

◀︎Contents　　　　　STUDY JavaScript_005-1